<template>
    <div>
        
        <li>
            <div v-if="data.id>0" @click='changepid(data.id)' :class="pid == data.id?'active':''" :id='data.id'>{{data.name}}</div>
            <ul v-if='data.son && data.son.length>0'>
                <reply v-for='son in data.son' :data='son' :key='son.id'/>
            </ul>
        </li>

    </div>
</template>

<script>
    export default {
        name:'reply',
        props:['data'],
        data() {
            return {
                pid:0
            }
        },
        methods: {
            changepid(pid){
                this.pid = pid
                localStorage.setItem('pid',pid)
                let activelist = document.getElementsByClassName('active')
                for(let i=0;i<activelist.length;i++){
                    activelist[i].classList.remove('active')
                }
                let pre = document.getElementById(pid)
                pre.classList.add('active')

            }
        },
    }
</script>

<style scoped>
.active{
    background-color: aquamarine;
}
</style>